<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" style="margin-left: 25%;margin-top: 10px;height: 800px;overflow-y:scroll;">
    <input name="id" id="id" type="hidden"/>
    <input name="posterPhotoUrl1" id="posterPhotoUrl1" type="hidden"/>
    <input name="posterPhotoUrl2" id="posterPhotoUrl2" type="hidden"/>
    <input name="exchangeCenterPhotoUrl" id="exchangeCenterPhotoUrl" type="hidden"/>
    <input name="sharePhotoUrl" id="sharePhotoUrl" type="hidden"/>
    <input name="joinVipUrl" id="joinVipUrl" type="hidden"/>
    <input name="channelCooperationUrl" id="channelCooperationUrl" type="hidden"/>
    <br/>
    <div class="layui-form-item" id="imgDiv">
        <label class="layui-form-label">活动图片1:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 300px;height: 100px">
                <div class="image-preview" style="width: 300px;height: 100px">
                    <div class="image">
                        <img src="" id="posterImg1" style="width: 300px;height: 100px">
                        <span class="image-browse" style="width: 300px" id="uploadFun"><strong>上传图片</strong><span
                                style="width: 300px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="width: 300px"><span style="color: red">图片类型:JPG/JPEG/PNG 推荐尺寸:1200X400</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="img2Div">
        <label class="layui-form-label">活动图片2:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 300px;height: 100px">
                <div class="image-preview" style="width: 300px;height:100px">
                    <div class="image">
                        <img src="" id="posterImg2" style="width: 300px;height: 100px">
                        <span class="image-browse" style="width: 300px" id="uploadFun2"><strong>上传图片</strong><span
                                style="width: 300px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="img3Div">
        <label class="layui-form-label">兑换中心图片:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 200px;height: 200px">
                <div class="image-preview" style="width: 200px;height: 200px">
                    <div class="image">
                        <img src="" id="exchangeImg" style="width: 200px;height: 200px">
                        <span class="image-browse" style="width: 200px" id="uploadFun3"><strong>上传图片</strong><span
                                style="width: 200px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="img4Div">
        <label class="layui-form-label">分享页面图片:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 200px;height: 200px">
                <div class="image-preview" style="width: 200px;height: 200px">
                    <div class="image">
                        <img src="" id="shareImg" style="width: 200px;height: 200px">
                        <span class="image-browse" style="width: 200px" id="uploadFun4"><strong>上传图片</strong><span
                                style="width: 200px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="img5Div">
        <label class="layui-form-label">加入会员页面:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 200px;height: 200px">
                <div class="image-preview" style="width: 200px;height: 200px">
                    <div class="image">
                        <img src="" id="joinVipImg" style="width: 200px;height: 200px">
                        <span class="image-browse" style="width: 200px" id="uploadFun5"><strong>上传图片</strong><span
                                style="width: 200px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="img6Div">
        <label class="layui-form-label">渠道合作二维码:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 200px;height: 200px">
                <div class="image-preview" style="width: 200px;height: 200px">
                    <div class="image">
                        <img src="" id="channelCooperationImg" style="width: 200px;height: 200px">
                        <span class="image-browse" style="width: 200px" id="uploadFun6"><strong>上传图片</strong><span
                                style="width: 200px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-top: 30px">
        <div class="layui-input-block">
            <button class="layui-btn" style="margin-left:50px;" lay-submit lay-filter="setSubmit">立即提交</button>
        </div>
    </div>
</form>
<table class="layui-table" id="grid" lay-filter="grid">
</table>
<script th:replace="/common/inc::incJs"></script>
<script>
    var form = layui.form;

    initUploader({
        browse_button: 'uploadFun',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {

        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#posterImg1").attr("src", sourceLink);
            $("#posterPhotoUrl1").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    initUploader({
        browse_button: 'uploadFun2',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            if (file.type == "image/jpeg" || file.type == "image/png") {

            } else {
                layer.msg("请上传jpeg或者png文件");
                up.stop();
            }
            up = null;
            file = null;
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#posterImg2").attr("src", sourceLink);
            $("#posterPhotoUrl2").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    initUploader({
        browse_button: 'uploadFun3',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            if (file.type == "image/jpeg" || file.type == "image/png") {

            } else {
                layer.msg("请上传jpeg或者png文件");
                up.stop();
            }
            up = null;
            file = null;
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#exchangeImg").attr("src", sourceLink);
            $("#exchangeCenterPhotoUrl").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    initUploader({
        browse_button: 'uploadFun4',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            if (file.type == "image/jpeg" || file.type == "image/png") {

            } else {
                layer.msg("请上传jpeg或者png文件");
                up.stop();
            }
            up = null;
            file = null;
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#shareImg").attr("src", sourceLink);
            $("#sharePhotoUrl").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    initUploader({
        browse_button: 'uploadFun5',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            if (file.type == "image/jpeg" || file.type == "image/png") {

            } else {
                layer.msg("请上传jpeg或者png文件");
                up.stop();
            }
            up = null;
            file = null;
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#joinVipImg").attr("src", sourceLink);
            $("#joinVipUrl").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    initUploader({
        browse_button: 'uploadFun6',
        uptoken_url: '/backend/security/qiniu/getUptoken',
        domain: 'http://image.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            if (file.type == "image/jpeg" || file.type == "image/png") {

            } else {
                layer.msg("请上传jpeg或者png文件");
                up.stop();
            }
            up = null;
            file = null;
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
            $("#channelCooperationImg").attr("src", sourceLink);
            $("#channelCooperationUrl").val(sourceLink);
            layer.msg("上传成功");
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });
    /*initUploader({
        browse_button: 'addVideo',
        uptoken_url: '/backend/security/qiniu/getVideoUptoken',
        domain: 'http://video.intelsalon.com/',
        'BeforeUpload': function (up, file) {
            $("#percentDiv").show();
            up = null;
            file = null;
        },
        'UploadProgress': function (up, file) {
            $("#percent").val(file.percent + "%  上传速率:" + (file.speed / (1024 * 1024)).toFixed(2) + " MB/s");
        },
        'FileUploaded': function (up, file, info) {
            var domain = up.getOption('domain');
            var res = $.parseJSON(info);
            var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*!/
            $("#videoUrl").val(sourceLink);
            layer.msg("上传成功");
            $("#percentDiv").hide();
        }, 'Error': function (up, err, errTip) {
            layer.msg(errTip);
        }
    });*/

    $(function () {
        $.post('/backend/security/actPhotoUrl/getById', {id: 1}, function (res) {
            if (res.code < 0) {
                layer.msg(res.message);
            }
            else {
                if (res.body != null) {
                    $("form").loadData(res.body);
                    $("#posterImg1").attr("src", res.body.posterPhotoUrl1);
                    $("#posterImg2").attr("src", res.body.posterPhotoUrl2);
                    $("#exchangeImg").attr("src", res.body.exchangeCenterPhotoUrl);
                    $("#shareImg").attr("src", res.body.sharePhotoUrl);
                    $("#joinVipImg").attr("src", res.body.joinVipUrl);
                    $("#channelCooperationImg").attr("src", res.body.channelCooperationUrl);
                } else {

                }
            }
        });
    });

    form.on('submit(setSubmit)', function (data) {
        if ($("#id").val() > 0) {
            $.post('/backend/security/actPhotoUrl/update', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    layer.msg("图片配置上传成功");
                }
            });
        } else {
            $.post('/backend/security/actPhotoUrl/add', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    layer.msg("图片配置上传成功");
                }
            });
        }
        return false;
    });

</script>
</body>
</html>
